<template>
  <view class="pad30">
    <view class="flex-align flex-between form-item">
      <view>头像</view>
      <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
        <image class="avatar" :src="avatar"></image>
      </button>
    </view>
    <view class="flex-align flex-between form-item" style="border-top: 1px solid #eee">
      <text>昵称</text>
      <input type="nickname" class="weui-input" placeholder="请输入昵称" />
    </view>
    <view class="mt100">
      <button type="primary" @tap="register">确定</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const defaultAvatarUrl =
  'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
const avatar = ref(defaultAvatarUrl)
const onChooseAvatar = (e: any) => {
  const { avatarUrl } = e.detail
  avatar.value = avatarUrl
}

const register = () => {}
</script>
<style lang="scss" scoped>
.avatar-wrapper {
  padding: 0;
  position: absolute;
  right: 0;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  .avatar {
    width: 100rpx;
    height: 100rpx;
  }
}
.weui-input {
  text-align: right;
}
.form-item {
  position: relative;
  height: 120rpx;
  display: flex;
  align-items: center;
}
</style>
